<template>
  <div>
    <div v-transfer-dom>
      <div
        v-show="show"
        :style="style"
        :class="b([theme])"
        @animationend="onAnimationEnd"
        @webkitAnimationEnd="onAnimationEnd"
      >
        <div v-if="title || showTitleClose" :class="b('title')" class="van-hairline--top">
          <span v-text="title"></span>
          <span
            :class="b('close')"
            v-if="showTitleClose"
            v-text="closeButtonText"
            @click="onClose"
          ></span>
        </div>
        <div 
          v-if="showInputNumber" 
          class="vux-x-input weui-cell vux-tap-active"
          style="margin: 0;border: 1px #e5e5e5 solid;border-bottom: 0; background-color: #f9f9f9;"
        >
          <div class="weui-cell__ft" style="color: #000;font-size: 20px;">
            <div>{{ unit }}</div>
          </div>
          <div class="weui-cell__bd weui-cell__primary" style="width: 100%;overflow: hidden;">
            <div class="weui-input" style="text-align: center;">
              <span style="text-fill-color: #000;font-size: 20px;">{{ value }}</span>
            </div>
          </div>
          <div class="weui-cell__hd">
          </div>
        </div>
        <div :class="b('body')">
          <key
            v-for="key in keys"
            :key="key.text"
            :text="key.text"
            :type="key.type"
            @press="onPressKey"
          />
        </div>
        <div v-if="theme === 'custom'" :class="b('sidebar')">
          <key :text="'delete'" :type="['delete', 'big']" @press="onPressKey" />
          <key :text="closeButtonText" :type="['green', 'big']" @press="onPressKey" />
        </div>
      </div>
    </div>
    <div class="weui-mask" style="display: none;"></div>
  </div>
</template>

<script>
import { TransferDom } from 'vux'
import bemMixin from './bem'
import Key from './Key';

export default {
  name: 'van-number-keyboard',
  mixins: [bemMixin],
  directives: {
    TransferDom
  },
  props: {
    value: String,
    unit: String,
    show: Boolean,
    title: String,
    closeButtonText: String,
    theme: {
      type: String,
      default: 'default'
    },
    extraKey: {
      type: String,
      default: ''
    },
    zIndex: {
      type: Number,
      default: 100
    },
    transition: {
      type: Boolean,
      default: true
    },
    showDeleteKey: {
      type: Boolean,
      default: true
    },
    hideOnClickOutside: {
      type: Boolean,
      default: true
    },
    showInputNumber: {
      type: Boolean,
      default: true
    }
  },

  mounted() {
    this.handler(true);
  },

  destroyed() {
    this.handler(false);
  },

  activated() {
    this.handler(true);
  },

  deactivated() {
    this.handler(false);
  },

  watch: {
    show() {
      if (!this.transition) {
        this.$emit(this.show ? 'show' : 'hide');
      }
    }
  },

  computed: {
    keys() {
      const keys = [];
      for (let i = 1; i <= 9; i++) {
        keys.push({ text: i });
      }

      switch (this.theme) {
        case 'default':
          keys.push(
            { text: this.extraKey, type: ['gray'] },
            { text: 0 },
            { text: 'delete', type: ['gray', 'delete'] }
          );
          break;
        case 'custom':
          keys.push(
            { text: 0, type: ['middle'] },
            { text: this.extraKey }
          );
          break;
      }

      return keys;
    },

    style() {
      return {
        zIndex: this.zIndex
      };
    },

    showTitleClose() {
      return this.closeButtonText && this.theme === 'default';
    }
  },

  methods: {
    handler(action) {
      if (action !== this.handlerStatus && this.hideOnClickOutside) {
        this.handlerStatus = action;
        document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur);
      }
    },

    onBlur() {
      this.$emit('blur');
    },

    onClose() {
      this.$emit('close');
      this.onBlur();
    },

    onAnimationEnd() {
      this.$emit(this.show ? 'show' : 'hide');
    },

    onPressKey(text) {
      if (text === '') {
        return;
      }

      if (text === 'delete') {
        this.$emit('delete');
      } else if (text === this.closeButtonText) {
        this.onClose();
      } else {
        this.$emit('input', text);
      }
    }
  },
  components: {
    Key
  },
}
</script>

<style lang="scss" scoped>
/* color variables */
$black: #000;
$white: #fff;
$red: #f44;
$blue: #38f;
$orange: #f60;
$green: #06bf04;
$gray: #c9c9c9;
$gray-light: #e5e5e5;
$gray-darker: #666;
$gray-dark: #999;

/* default colors */
$text-color: #333;
$border-color: #eee;
$active-color: #e8e8e8;
$background-color: #f8f8f8;


$van-number-keyboard-key-height: 54px;

.van-number-keyboard {
  left: 0;
  bottom: 0;
  width: 100%;
  position: fixed;
  user-select: none;
  background-color: $white;
  animation-timing-function: ease-out;
  border-radius: 15px 15px 0 0;
  border-color: #fff;

  &__title {
    // height: 30px;
    padding: 15px 0;
    font-size: 14px;
    // line-height: 30px;
    text-align: center;
    position: relative;
    color: $black;
  }

  &__body {
    box-sizing: border-box;
  }

  &__close {
    right: 0;
    color: $blue;
    font-size: 14px;
    padding: 0 15px;
    position: absolute;

    &:active {
      background-color: $active-color;
    }
  }

  &__sidebar {
    right: 0;
    bottom: 0;
    width: 25%;
    position: absolute;
    height: 216px;
  }

  &--custom {
    .van-number-keyboard__body {
      padding-right: 25%;
    }
  }
}

[dir=rtl] .van-number-keyboard {
  direction: ltr;
}

.van-key {
  width: calc(100% / 3);
  font-size: 24px;
  font-style: normal;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  height: $van-number-keyboard-key-height;
  line-height: $van-number-keyboard-key-height;

  &::after {
    border-width: 1px 1px 0 0;
  }

  &--middle {
    width: calc(200% / 3);
  }

  &--big {
    width: 100%;
    height: 108px;
    line-height: 108px;
  }

  &--green {
    font-size: 20px;
    color: $white;
    background-color: $blue;

    &.van-key--active {
      background-color: #308305;
    }

    &::after {
      border-color: $green;
    }
  }

  &--delete {
    font-size: 0;
    background: url("") no-repeat center center;
    background-size: auto 15px;
  }

  &--gray {
    background-color: #f3f3f6;
  }

  &--active {
    background-color: $active-color;
  }
}

@keyframes van-slide-bottom-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes van-slide-bottom-leave {
  to {
    transform: translate3d(0, 100%, 0);
  }
}

.van-slide-bottom {
  &-enter-active {
    animation: van-slide-bottom-enter .3s both ease;
  }

  &-leave-active {
    animation: van-slide-bottom-leave .3s both ease;
  }
}

</style>
